import React, { Component } from 'react';
import '../../scss/Shoppingcart.scss'
import { LeftOutlined,RightOutlined } from '@ant-design/icons';
import logo from '../views-images/会员购logo.jpg'
import shoppingcartww from '../views-images/shoppingcart.png'
import { connect } from 'react-redux';
import { wang_shopping_push,myshopping_clearAll,myshopping_addOne ,myshopping_subOne} from '../../store/method/shop';

import { Toast } from 'antd-mobile'



class Shoppingcart extends Component {
    
    state = {
        price:0,
    }

    render() {
        return (
            <div className='shoppingcart'>
                <div className="tabble">
                    <div> <LeftOutlined />  </div>
                    <span>购物车({ this.props.shop.length })</span>
                    <div> <RightOutlined /> </div>
                </div>

                <div className="top_logo">
                    <div className="left_log">
                        <div className="image">
                            <img src={ logo } alt="" />
                        </div>
                        <span>cdf会员购</span>
                    </div>
                    <span onClick={ this.clearShoppingAll }>清空</span>
                </div>

                {/* 三元表达式判断 如果购物车数组没有数据就显示购物车为空的图片 */}
                {
                    this.props.shop.length == 0 ? 
                    <>
                    <div className="inage">
                        <img src={ shoppingcartww } alt="" />
                    </div>
                    </>:
                        this.props.shop.map((item,index)=>{ 
                            return (
                                <>
                                <div className="shopp_go" key={ index }>
                                    <div className="left">
                                        <input type="checkbox" />
                                    </div>
                                    <div className="mine">
                                        <div className="image">
                                            <img src={ item.pic } alt="" />
                                        </div>
                                    </div>
                                    <div className="rigth">
                                        <div className="name">{ item.brand }</div>
                                        <div className="baoyou">
                                            <div className="inp">包邮包退</div>
                                        </div>
                                        <div className="manerbao">
                                            <div className="biu">
                                                满￥200/800,享超值换购
                                            </div>
                                        </div>
                                        <div className="huifu">
                                            <div className="yuanjia">3天后恢复原价</div>
                                        </div>
                                        <div className="anniu">
                                            <div className="jine">￥{ item.salesPrice.value *  item.count }</div>
                                            <div className="right">
                                                <div className="top">
                                                    <div className="aa"></div>
                                                    <div className='left' onClick={ () => { this.shoppingSubOne(item) } }>-</div>
                                                    <span>{ item.count }</span>
                                                    <div className='right' onClick={ () => { this.shoppingAddOne(item) } }>+</div>
                                                </div>
                                                <div className="bottom">限购3件</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        </>
                            )
                        })
                    }
                <div className="sort">
                    <div className="left">
                        <div className='checkbox'>
                            <input type="checkbox" />全选
                        </div>
                    </div>
                    <div className="right">
                        <div className='zongjia'>总价: ￥<span>{ this.state.price }</span></div>
                        <div className='go' onClick={ this.add }>去结算({ this.props.shop.length })</div>
                    </div>
                </div>
            </div>
        );
    }

    //!  购物车商品数量加 1

    shoppingAddOne = (item) => {
        if( item.count < 3 ) {
            this.props.myshopping_addOne(item)
            setTimeout(() => { this.props.wang_shopping_push() }, 400);
            setTimeout(() => { Toast.show({ icon: 'success', content: '数量加1' }) }, 1000);
         } else {
             Toast.show({ content: '数量已上限！' }) }
        }

    //!  购物车商品数量减 1

    shoppingSubOne = (item) => {
        // console.log(item);
        if( item.count > 1 ) {
            this.props.myshopping_subOne(item)
            setTimeout(() => {  this.props.wang_shopping_push() }, 400);
            setTimeout(() => { Toast.show({ icon: 'success', content: '数量减1' })}, 1000);
        } else { 
            Toast.show({ content: '只有一个啦！' }) } 
        }

    //! 清空购物车列表

    clearShoppingAll = () => {
        this.props.myshopping_clearAll()
        setTimeout(() => { this.props.wang_shopping_push() }, 400);
        setTimeout(() => { Toast.show({ icon: 'success', content: '已清空！' }) }, 1000);
        
        this.setState({ price : 0 })
    }


    componentDidMount() {
        this.props.wang_shopping_push();
        // console.log(this.props.shop);

        // ! 计算总价
        this.timeid =  setInterval(() => {
            setTimeout(() => {
                var sum = 0;
                this.props.shop.forEach((item)=>{
                sum += parseInt( item.salesPrice.value) * item.count
                this.setState({ price:sum })
            })
        }, 500);
      }, 500);
    }

    // 清除定时器
    componentWillUnmount() {
       clearInterval(this.timeid)
    }
}

var newShoppingcart = connect(
    state => {
        return {
            shop:state.shop
        }
    },
    dispatch => {
        return {
            wang_shopping_push : function() {
                dispatch( wang_shopping_push() )
            },
            myshopping_clearAll : function() {
                dispatch( myshopping_clearAll() )
            },
            //todo 数量加 1
            myshopping_addOne : function(item) {
                dispatch( myshopping_addOne(item) )
            },
            //todo  数量减 1
            myshopping_subOne :function(item) {
                dispatch( myshopping_subOne(item) )
            }
        }
    }

)( Shoppingcart )

export default newShoppingcart;